<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">

 </style>
<script type="text/javascript">
$(function() {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true
    });
});
$(document).ready(function() {
	$('.slider').slider({
    	range: true,
        value: 0,
        min: 1,
	    max: 100,
	    slide: function( event, ui ) {
	        $( "#slider-result" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      	}
    });
	$( "#slider-result" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
		      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
	$( "#slider-result" ).val( $( ".slider" ).slider( "value" ) );
});
/* function checkTitle(len) {
	/*$('.title-slider').each(function() {
		title.push($(this).attr('title'));
	});
    var capacity = 0;
    var itemIds = $.makeArray($('.title-slider').map(function () {
        return $(this).attr('title');
    }));
   	alert(itemIds.length); 
   	for(var i=0; i<itemIds.length;i++){
   		alert(i);
   		if(itemIds[i] == '1'){
   			capacity = 100;
   			
   		}
   		else if(itemIds[i] == '2') {
   			capacity = 200; 
   			
   		}
   		
   	}
} */

</script>
<div id="sports-information">
    <div>
        <div id="showping-caption" style="border: 1px solid #bfc5c5;">
            <span style="display: inline-block;">
                 <a href=""><<</a>
                 <input type="text" name="birthday" id="datepicker" />
                 <a href="">>></a>
            </span>
        </div>
        <div id="showping-contents">
            <table id="insertNode">
                <tr>
                    <td>
                        <div>
                            <span><input type="radio" name="bob" value="1">아침</span> 
                        </div>
                        <div>
                            <span><input type="radio" name="bob" value="2">점심</span> 
                        </div>
                        <div>
                            <span><input type="radio" name="bob" value="3">저녁</span> 
                        </div>
                    </td>   
                </tr>           
                <tr>
                    <td>
                         <div>
                        	<div></div> 
                        	<div></div> 
                         </div>
                    </td>   
                </tr>
            </table>
        </div>
    </div>
</div>
<div id="sports-information1">
    <div id="sports-addArea">
         <h2></h2>
         <div></div>
    </div>
    <div id="cart">
        <dl>
            <dt class="sports-list-caption">fewf</dt>
            <dd id="first">
                <ul>
                    <li class="food-list"><a href=""><span>한식</span></a></li>
                    <li class="food-list"><a href=""><span>중식</span></a></li>
                    <li class="food-list"><a href=""><span>양식</span></a></li>
                    <li class="food-list"><a href=""><span>간식</span></a></li>
                </ul> 
            </dd>
        </dl>   
        <dl>
            <dt class="sports-list-caption">fewf</dt>
            <dd id="two">
                <ul>
                    <c:forEach step="1" var="i" begin="1" end="20">
                        <li class="sports-list"><a href=""><span>${i }목록</span></a></li>
                    </c:forEach>    
                </ul> 
            </dd>
        </dl>   
        <dl>
            <dt class="sports-list-caption">fewf</dt>
            <dd id="three">
                <ul>
                    <li class="slider-li">
						<p class="title-slider" title='1'>칼로리</p>
						<div class="slider"></div>
						<p class="num">0~3000</p>
                    </li>
                    <li class="slider-li">
						<p class="title-slider" title='2'>탄수화물</p>
						<div class="slider"></div>
						<p class="num">0~350</p>
                    </li>
                    <li class="slider-li">
						<p class="title-slider" title='3'>단백질</p>
						<div class="slider"></div>
						<p class="num">0~110</p>
                    </li>
                    <li class="slider-li">
						<p class="title-slider" title='4'>지방</p>
						<div class="slider"></div>
						<p class="num">0~190</p>
                    </li>
                    <li class="slider-li">
						<p class="title-slider" title='5'>나트륨</p>
						<div class="slider"></div>
						<p class="num">0~40,000</p>
                    </li>
                    <li class="slider-li">
						<p class="title-slider" title='6'>식이섬유</p>
						<div class="slider"></div>
						<p class="num">0~100</p>
                    </li>
                    <li class="slider-li">
						<p class="title-slider" title='7'>콜레스테롤</p>
						<div class="slider"></div>
						<p class="num">0~1,500</p>
                    </li>
                    <li style="width: 100%; height: 67px;">
                    	<input type="text" id="slider-result" style="border: 0; color: #f6931f; font-weight: bold;" />
                    </li>
                </ul> 
            </dd>
        </dl>   
    </div>
    <div id="sports-div" class="sports-div food" style="height: 37%;">
        <div style="width: 100%; height: 95px;">
           <div id="sports-div-image"></div>   
           <div id="sports-div-text"></div>
        </div>
    </div>
</div>

<div></div>

  